---
title: CurveRenderer 曲线渲染器
icon: Tangent
relatedFile: app/src/core/render/canvas2d/basicRenderer/curveRenderer.tsx
---

这个服务用于在画布上渲染各种曲线和直线，所有渲染操作都基于 View 坐标系。它通过 `Project` 实例访问画布上下文 ( `canvas.ctx` ) 来执行绘图命令。

## API

### 直线和折线渲染

#### `renderSolidLine(start: Vector, end: Vector, color: Color, width: number): void`

绘制一条指定起点、终点、颜色和宽度的直线实线。

#### `renderSolidLineMultiple(locations: Vector[], color: Color, width: number): void`

绘制一条由多个点构成的折线实线，指定颜色和宽度。

#### `renderPenStroke(stroke: PenStrokeSegment[], color: Color): void`

在画布上绘制笔画，支持根据笔画段的宽度进行绘制。

#### `renderSolidLineMultipleSmoothly(locations: Vector[], color: Color, width: number): void`

绘制一条经过平滑处理的折线。
核心思路：将折线的顶点转换为连续贝塞尔曲线的控制点，以实现平滑效果。

#### `renderSolidLineMultipleWithWidth(locations: Vector[], color: Color, widthList: number[]): void`

绘制一条折线，其线宽可以根据 `widthList` 实时变化。
注意：频繁变更线宽可能导致渲染卡顿。

#### `renderSolidLineMultipleWithShadow(locations: Vector[], color: Color, width: number, shadowColor: Color, shadowBlur: number): void`

绘制一条带有阴影的折线实线，可指定阴影颜色和模糊度。

#### `renderDashedLine(start: Vector, end: Vector, color: Color, width: number, dashLength: number): void`

绘制一条指定起点、终点、颜色、宽度和虚线长度的虚线。

### 曲线渲染

#### `renderBezierCurve(curve: CubicBezierCurve, color: Color, width: number): void`

绘制一条三次贝塞尔曲线，指定颜色和宽度。

#### `renderSymmetryCurve(curve: SymmetryCurve, color: Color, width: number): void`

绘制一条对称曲线，内部通过调用 `renderBezierCurve` 实现。

### 渐变渲染

#### `renderGradientLine(start: Vector, end: Vector, startColor: Color, endColor: Color, width: number): void`

绘制一条从起始颜色渐变到结束颜色的直线实线。

#### `renderGradientBezierCurve(curve: CubicBezierCurve, startColor: Color, endColor: Color, width: number): void`

绘制一条颜色从起始点渐变到结束点的贝塞尔曲线。
